<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket连接测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .connected {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .disconnected {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .connecting {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        .log {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 10px;
            height: 300px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .connect-btn {
            background-color: #28a745;
            color: white;
        }
        .disconnect-btn {
            background-color: #dc3545;
            color: white;
        }
        .test-btn {
            background-color: #007bff;
            color: white;
        }
    </style>
</head>
<body>
    <h1>WebSocket连接测试</h1>
    
    <div id="status" class="status disconnected">未连接</div>
    
    <div>
        <button id="connectBtn" class="connect-btn">连接</button>
        <button id="disconnectBtn" class="disconnect-btn">断开</button>
        <button id="testBtn" class="test-btn">发送测试消息</button>
    </div>
    
    <h3>连接日志</h3>
    <div id="log" class="log"></div>

    <script>
        let ws = null;
        const statusDiv = document.getElementById('status');
        const logDiv = document.getElementById('log');
        const connectBtn = document.getElementById('connectBtn');
        const disconnectBtn = document.getElementById('disconnectBtn');
        const testBtn = document.getElementById('testBtn');

        function log(message) {
            const timestamp = new Date().toLocaleTimeString();
            logDiv.innerHTML += `[${timestamp}] ${message}\n`;
            logDiv.scrollTop = logDiv.scrollHeight;
        }

        function updateStatus(status, className) {
            statusDiv.textContent = status;
            statusDiv.className = `status ${className}`;
        }

        function connect() {
            if (ws && ws.readyState === WebSocket.OPEN) {
                log('WebSocket已连接，无需重复连接');
                return;
            }

            log('正在连接到 ws://localhost:8086/ws/warning...');
            updateStatus('连接中...', 'connecting');
            
            ws = new WebSocket('ws://localhost:8086/ws/warning');

            ws.onopen = function(event) {
                log('✅ WebSocket连接成功！');
                updateStatus('已连接', 'connected');
                connectBtn.disabled = true;
                disconnectBtn.disabled = false;
                testBtn.disabled = false;
            };

            ws.onmessage = function(event) {
                log(`📨 收到消息: ${event.data}`);
                try {
                    const data = JSON.parse(event.data);
                    log(`📋 解析后: ${JSON.stringify(data, null, 2)}`);
                } catch (e) {
                    log(`⚠️ 消息不是JSON格式: ${event.data}`);
                }
            };

            ws.onclose = function(event) {
                log(`❌ WebSocket连接关闭 - 代码: ${event.code}, 原因: ${event.reason}`);
                updateStatus('已断开', 'disconnected');
                connectBtn.disabled = false;
                disconnectBtn.disabled = true;
                testBtn.disabled = true;
            };

            ws.onerror = function(error) {
                log(`💥 WebSocket连接错误: ${error}`);
                updateStatus('连接错误', 'disconnected');
                connectBtn.disabled = false;
                disconnectBtn.disabled = true;
                testBtn.disabled = true;
            };
        }

        function disconnect() {
            if (ws) {
                log('主动断开WebSocket连接...');
                ws.close(1000, '用户主动断开');
                ws = null;
            }
        }

        function sendTestMessage() {
            if (ws && ws.readyState === WebSocket.OPEN) {
                const testMessage = {
                    type: 'ping',
                    timestamp: Date.now(),
                    message: '前端测试消息'
                };
                ws.send(JSON.stringify(testMessage));
                log(`📤 发送测试消息: ${JSON.stringify(testMessage)}`);
            } else {
                log('❌ WebSocket未连接，无法发送消息');
            }
        }

        // 绑定事件
        connectBtn.addEventListener('click', connect);
        disconnectBtn.addEventListener('click', disconnect);
        testBtn.addEventListener('click', sendTestMessage);

        // 初始化状态
        disconnectBtn.disabled = true;
        testBtn.disabled = true;

        log('WebSocket测试页面已加载');
        log('请确保后端WebSocket服务正在运行在端口8086');
    </script>
</body>
</html>
